;
$(function () {
    $(".hedleft").find("li").find("a").hover(function () {
        $(this).css("text-decoration", "underline").css("color", "#D5182A")
    }, function () {
        $(this).css("text-decoration", "none")
        $(".ls").css("color", "#666666")
    })
    //读取购物车数据
    console.log(localStorage.getItem("users"))
    $.ajax({
        url: "./api/getcart",
        data: {
            u_id: JSON.parse(localStorage.getItem("users")).u_id
        }
    }).then(function (res) {
        loadlist(res.data)
        num()
        config()
        pay()
        console.log(res)
    })
    //动态创建购物车列表
    function loadlist(arry) {
        arry.forEach((el) => {
            var $table = $(`<table class='cart-table'><tbody>
                    <tr data-c_id=${el.c_id}>
                        <td class="zp_td check">
                            <span>
                                <b>
                                    <input class="check_cb" id="Checkbox3" type="checkbox" checked value="3">
                                </b>
                            </span>
                        </td>
                        <td class="cb-r11 zp-td">
                            <a href="./details.html?=${el.p_id}" target="_blank">
                            <img width="50" height="50" src="${el.p_img}" title="${el.p_name}"></a>
                        </td>
                        <td class="cb-r1">
                            <a class="c12" href="./details.html?=${el.p_id}" target="_blank">${el.p_name}</a><br>
                        </td>
                        <td class="cb-r2">
                            ¥<span class="price"">${el.p_price}<span>
                        </td>
                        <td class="cb-r3 cf04" id="Pro3">
                            －
                        </td>
                        <td class="cb-r4">
                            <p class="num-line">
                                <div class="imp1">
                                    <span class="fl Cart-down ">－</span>
                                    <input type="text" value="${el.p_number}" maxlength="4" class="fl num-input" id="num-input">
                                    <span class="fl Cart-up" >＋</span> <span style="display: none;" class="num_tip"></span>
                                </div>
                            </p>
                        </td>
                        <td class="cb-r5">
                            <span id="sum3" class="cs-sum">¥<b>${el.p_total}</b></span>
                        </td>
                        <td class="cb-r6">
                            <span class="coll-opt"><a href="javaScript:void(0)">收藏</a></span>&nbsp;&nbsp;&nbsp;&nbsp;
                            <span class="del-opt"><a href="javaScript:void(0)">删除</a></span>
                        </td>
                    </tr>
                </tbody></table>`)
            $("#palyMoney").find("span").text(el.p_total)
            $(".list-area").append($table)
        })
    }

    function num() {
        //点击修改数量
        //加
        $(".Cart-up").on("click", function () {
            var num = $(this).prev("input").val()
            num++
            $(this).prev("input").val(num)
            //data(c_id)读取上面的隐藏值
            var c_id = $(this).parents("tr").data("c_id")
            $.ajax({
                url: "./api/modify",
                type: "post",
                data: {
                    c_id,
                    num
                }
            }).done(res => {
                layer.msg(res.msg)
            })
            //修改总价
            var Price = $(this).parents("td").siblings(".cb-r2").find(".price").text() * num
            $(this).parents("td").siblings(".cb-r5").find("b").text(`${Price}`)
            $(this).parents(".cb-r4").siblings(".zp_td").find('[type=checkBox]').prop("checked", true)
            pay()
        })
        //减.
        $(".list-area").on("click", ".Cart-down", function () {
            var num = $(this).next("input").val()
            num--;
            if (num < 1) {
                num = 1;
                alert("数据不能为空!")
            }
            $(this).next("input").val(num)
            //data(c_id)读取上面的隐藏值
            var c_id = $(this).parents("tr").data("c_id")
            $.ajax({
                url: "./api/modify",
                type: "post",
                data: {
                    c_id,
                    num
                }
            }).done(res => {
                layer.msg(res.msg)
            })
            //修改总价
            var Price = $(this).parents("td").siblings(".cb-r2").find(".price").text() * num
            $(this).parents("td").siblings(".cb-r5").find("b").text(`${Price}`)
            $(this).parents(".cb-r4").siblings(".zp_td").find('[type=checkBox]').prop("checked", true)
            pay()
        })

        //动态输入修改数量 
        $(".list-area").on("change", "#num-input", function () {
            var num = $(this).val()
            if (num < 1) {
                alert("客官,商品的数量不能少于1哟!")
                num = 1;
                $(this).val(num)
            }
            var c_id = $(this).parents("tr").data("c_id")
            $.ajax({
                url: "./api/modify",
                type: "post",
                data: {
                    c_id,
                    num
                }
            }).done(res => {
                layer.msg(res.msg)
            })
            var Price = $(this).parents("td").siblings(".cb-r2").find(".price").text() * num
            $(this).parents("td").siblings(".cb-r5").find("b").text(`${Price}`)
            pay()
        })
        //收藏
        $(".coll-opt").on("click", function () {
            if (localStorage.getItem("users") == null || localStorage.getItem("users") == undefined) {
                layer.msg("请先登录")
            } else {
                layer.msg("恭喜客官,收藏成功!")
            }
        })
        //删除
        $(".list-area").on("click", ".del-opt", function () {
            var c_id = $(this).parents("tr").data("c_id")
            $.ajax({
                url: "./api/delete",
                type: "post",
                data: {
                    c_id
                }
            }).done(res => {
                layer.msg(res.msg);
                if (res.status == 1) {
                    //删除行
                    $(this).parents("tr").remove
                }
            })
            $(this).parents(".cart-table").remove()
            pay()
        })
        //删除选中商品
        $("#dele").on("click", function () {
            var truelist = $(".cart-table").find('[type=checkBox]:checked')
            for (var i = 0; i < truelist.length; i++) {
                var c_id = $(truelist[i]).parents("tr").data("c_id")
                $.ajax({
                    url: "./api/delete",
                    type: "post",
                    data: {
                        c_id
                    }
                }).then(res => {
                    layer.msg(res.msg);
                })
                //删除行
                $(truelist[i]).parents(".cart-table").remove()
            }
        })
    }

    function config() {
        //全选
        $("#checkAll").click(function () {
            $(".cart-table").find('[type=checkBox]').prop("checked", $(this).prop("checked"));
            $(".checkAll").prop("checked", $(this).prop("checked"));
            //判断购物车里面选中的数量,计算总金额
            if ($(this).prop("checked") == false) {
                $("#palyMoney").find("span").text(0.00)
            } else {
                pay()
            }
        })

        $(".checkAll").click(function () {
            $(".cart-table").find('[type=checkBox]').prop("checked", $(this).prop("checked"));
            $("#checkAll").prop("checked", $(this).prop("checked"));
            //判断购物车里面选中的数量,计算总金额
            if ($(this).prop("checked") == false) {
                $("#palyMoney").find("span").text(0.00)
            } else {
                pay()
            }
        })

        $(".cart-table").find('[type=checkBox]').click(function () {
            // checkbox的总个数 和 选中的个数比较 如果相等,上边打钩,否则不打钩
            var $cbxCount = $(".cart-table").find('[type=checkBox]').length;
            //被选中的个数
            var $checkCount = $(".cart-table").find('[type=checkBox]:checked').length;

            $("#checkAll").prop("checked", $cbxCount == $checkCount)
            $(".checkAll").prop("checked", $cbxCount == $checkCount)
            
            //判断购物车里面选中的数量,计算总金额
            var num1 = parseInt($(this).parents(".zp_td").siblings(".cb-r5").find("b").text())
            var num2 = parseInt($("#palyMoney").find("span").text())
            var sum = 0
            if ($(this).prop("checked") == false) {
                 sum= num2 - num1
                $("#palyMoney").find("span").text(sum)
                $(this)
            } else {
                sum= num2 + num1
                $("#palyMoney").find("span").text(sum)
            }
        })

        //清空购物车
        $("#clear").on("click", function () {
            if (confirm("客官,您确定要清空嘛?")) {
                $.ajax({
                    url: "./api/deleteAll",
                    type: "post",
                    data: {
                        u_id: JSON.parse(localStorage.getItem("users")).u_id
                    }
                }).then(res => {
                    layer.msg(res.msg);
                    if (res.status == 1) {
                        $(".list-area").find(".cart-table").remove()
                        $("#palyMoney").find("span").text(0.00)
                    }
                })
            }
        })
    }



    //遍历购物车列表,顶部购物车数量,计算总价
    function pay() {
        var tablelist = $(".list-area").find("table")
        var paymoney = 0;
        var paynum = 0;
        for (var i = 0; i < tablelist.length; i++) {
            var money = parseInt($(tablelist[i]).find(".cb-r5").find("b").text())
            var n = $(tablelist[i]).find(".cb-r4").find("input").val()
            paynum += parseInt(n)
            paymoney += parseInt(money)
            $("#palyMoney").find("span").text(paymoney)
            $(".m1").find("b").text(paynum)
        }
    }

    //登录和退出
    if (localStorage.getItem("users") == null || localStorage.getItem("users") == undefined) {
        $(".hedleft").find(".login").text("登录")
        $(".hedleft").find(".ls").text("注册")
    } else {
        var str = JSON.parse(localStorage.getItem("users")).u_phone
        var str1 = str.slice(0, 3)
        var str2 = str.slice(-4)
        $(".hedleft").find(".login").text(`${str1}****${str2}`).attr("href", "javascript:void(0)")
        $(".hedleft").find(".ls").text("退出").attr("href", "./api/quit").addClass("quit")
    }
    $(".quit").on("click", function () {
        localStorage.clear()
    })
})